<template>
  <div>
    <nav>
      <router-link to="/template-styn">Template Styn</router-link> |
      <router-link to="/computed">Computed</router-link> |
      <router-link to="/ifandfor">If and For</router-link> |
      <router-link to="/watch">Watch</router-link> |
      <router-link to="/keep-alive">Keep-Alive</router-link> |
      <router-link to="/pinia">Pinia</router-link>
    </nav>
    <router-view></router-view>
    <!-- 在多个组件间动态切换时缓存被移除的组件实例 -->
    <!-- <router-view v-slot="{ Component }">
      <keep-alive>
        <component :is="Component"></component>
      </keep-alive>
    </router-view> -->
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'

onMounted(() => {
  console.log('app')
})
</script>

<style scoped>
nav {
  padding: 20px;
  background-color: #f5f5f5;
  border-bottom: 1px solid #ddd;
}

nav a {
  margin: 0 10px;
  text-decoration: none;
  color: #2c3e50;
}

nav a.router-link-active {
  color: #42b983;
  font-weight: bold;
}
</style>
